<template>
<div>
  <van-swipe style="height: 200px;" vertical :autoplay="3000" indicator-color="white">
    <div v-for="(item,index) in BanerList" :key="index">
      <van-swipe-item>
        <img style="width: 100%;height:100%" :src="item.image_src" alt="">
      </van-swipe-item>
    </div>
  </van-swipe>
<!-- 导航栏 -->
  <van-grid :column-num="navList.length">
    <van-grid-item   v-for="(item,index) in navList" :key="index" :icon="item.image_src" :text="item.name" />
  </van-grid>
<!-- 楼层图 -->

</div>
</template>

<script>
import {mapActions,mapState} from "vuex";

export default {
  name: "Popular",
  computed:{
    ...mapState('Popular',['BanerList','navList','FloorList'])
  },
  mounted() {
    this.getBanarList();
    this.getNavList();
    this.getFloorList();
  },
  methods:{
    ...mapActions('Popular',['getBanarList','getNavList','getFloorList']),
  }
}
</script>

<style scoped lang="scss">
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>